<template>
  <div class="frienddetail">
  	<text-header :title="''" :bgcolor="'rgba(255,255,255,1)'" :color="'#808080'" :topath="'/friends'" class="textHeader"></text-header>
  	<div class="userbaseinfo">
  		<span class="usericon"><img :src="userinfo.src"></span>
  		<span class="username">{{userinfo.name}}</span>
  		<span class="yadu-icon-tebieguanzhu" v-if="userinfo.specialfocus"></span>
  	</div>
  	<div class="userotherinfo">
  		<div class="infoitem hisfocus">
  			<div class="text">他的关注点</div>
  			<div class="focuslist">
  				<span class="focusitem" v-for="item,i in userinfo.focuslist">{{item.name}}</span>
  			</div>
  		</div>
  		<div class="infoitem daywaternum">
  			<span class="text">今日饮水量</span>
  			<span class="waternum">{{userinfo.waternum}}ml</span>
  		</div>
  	</div>
  	<div class="btns">
  		<div :class="{'btnitem':true, 'focus':true, 'addfocus':!userinfo.friendflag}" v-if="!userinfo.friendflag"><span class="btnicon yadu-icon-tebieguanzhu"></span>关注</div>
  		<div :class="{'btnitem':true, 'focus':true, 'addfocus':userinfo.friendflag&&!userinfo.specialfocus}" v-if="userinfo.friendflag&&!userinfo.specialfocus"><span class="btnicon yadu-icon-tebieguanzhu"></span>特别关注</div>
  		<div class="btnitem cancelfocus" v-if="userinfo.specialfocus"><span class="btnicon yadu-icon-tebieguanzhu"></span>取消特别关注</div>
  		<div class="btnitem delete" v-if="userinfo.friendflag"><span class="btnicon yadu-icon-icon-shanchu"></span>删除</div>
  	</div>
  </div>
</template>

<script>
import textHeader from "../components/TextHeader";
export default {
  name: 'frienddetail',
  components: {
  	textHeader
  },
  data(){
  	return{
  		userinfo:{name:'用户名称',src:'http://static.ydcss.com/uploads/lightbox/meizu_s2.jpg',specialfocus:false,friendflag:true,waternum:500,focuslist:[{name:'健康',id:1},{name:'养生',id:2},{name:'养颜',id:3},{name:'养颜',id:3},{name:'养颜',id:3}]},
  	}
  }
}
</script>
<style lang="scss">
@import "../style/public.scss";
.frienddetail{
	height:100%;
	background:#f1f1f1;
	.userbaseinfo{
		background:#fff;
		padding:rem(30) rem(20) rem(24);
		display:flex;
		border-bottom:rem(2) solid #f1f1f1;
		.usericon{
			width:rem(112);
			height:rem(112);
			display:inline-block;
			margin-right:rem(20);
			img{
				height:100%;
				width:100%;
			}
		}
		.username{
			ailgn-self:center;
			flex:1;
			text-align:left;
			color:#818181;
			font-size:rem(40);
		}
		.yadu-icon-tebieguanzhu{
			color:$defaultcolor;
			font-size:rem(40);
		}
	}
	.userotherinfo{
		background:#fff;
		padding:0 rem(20);
		display:flex;
		flex-direction:column;
		.infoitem{
			width:100%;
			display:flex;
			flex-direction:row;
			padding:rem(18) 0;
			&.hisfocus{
				border-bottom:rem(2) solid #f1f1f1;
				padding:rem(18) 0 0 0;
			}
			.text{
				color:#808080;
				font-size:rem(28);
				width:rem(140);
				margin-right:rem(42);
				height:rem(32);
				line-height:rem(32);
			}
			.focuslist{
				display:flex;
				width:calc(100% - 2.42667rem);
				color:$defaultcolor;
				font-size:rem(16);
				flex-wrap:wrap;
				.focusitem{
					background:#d8f3d9;
					margin:0 rem(20) rem(20) 0;
					border-radius:rem(18);
					padding:rem(4) rem(28);
				}
			}
			.waternum{
				color:$defaultcolor;
				font-size:rem(28);
			}
		}
	}
	.btns{
		background:#fff;
		padding:0 rem(20);
		margin-top:rem(20);
		display:flex;
		flex-direction:column;
		.btnitem{
			border-top:rem(2) solid #f1f1f1;
			&:first-child{
				border:none;
			}
			height:rem(75);
			line-height:rem(75);
			font-size:rem(24);
			color:#919191;
			.btnicon{
				margin-right:rem(4);
			}
			&.addfocus{
				color:#e27b20;
			}
		}
	}
}
</style>
